<template>
	<view class="module-sku">
		<view class="product-content">
			<image class="media-object"></image>
			<view class="media-content">
				<view class="media-title">{{ productInfo.title }}</view>
				<view class="media-tips">商品编号：{{ productInfo.tips }}</view>
				<view class="media-price">￥{{ productInfo.price }}</view>
			</view>
		</view>
		<view class="sku-select">
			<view class="item" v-for="(list, listIndex) in skuList" :key="listIndex">
				<view class="item-title">{{ list.name }}</view>
				<view class="item-wrapper">
					<view
						class="item-content"
						@tap="skuClick(item, listIndex, index)"
						v-for="(item, index) in list.muster"
						:key="index"
						:class="[
							item.count > 0 ? '' : 'disabled',
							item.isActive ? 'active' : '',
						]"
					>
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
		<numberBox
			class="sku-number"
			:min="1"
			:value="productInfo.count"
			@change="handleNumber"
		></numberBox>
		<view class="module-button">
			<button
				type="main"
				@tap="handleAddCart"
				class="button button-shopcart"
				:data-img="img"
			>
				加入购物车
			</button>
			<button type="main" @tap="handleBooking" class="button button-booking">
				立即购买
			</button>
		</view>
	</view>
</template>
<script>
import numberBox from '@/pages/components/number-box/number-box.vue';
/**
 * SkuSelect sku选择
 * @property {Array} productInfo 商品信息
 * @property {Array} selectArr sku已选中数据
 * @event {Function} skuClick sku元素点击事件
 * @example <skuList :list="skuList" :selectArr="selectArr"></skuList>
 */
export default {
	components: {
		numberBox,
	},
	props: {
		productInfo: {
			type: Object,
			default: function () {
				return {};
			},
		},
		list: {
			type: Array,
			default: function () {
				return [];
			},
		},
		selectArr: {
			type: Array,
			default: function () {
				return [];
			},
		},
	},
	data() {
		return {
			img:
				'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/108272/8/9220/359926/5e71e059Ef5f8268a/258098ba96ce9cd2.jpg!q80.dpg.webp',
			skuList: [],
			skuSelect: [],
			selectCount: this.selectArr.length,
		};
	},
	computed: {
		goodsList() {
			return this.$store.getters.goodsList;
		},
		allTotal() {
			return this.$store.getters.allTotal;
		},
	},
	watch: {
		// 监听props变化
		list(val) {
			this.skuList = val;
			this.skuSelect = this.selectArr;
		},
	},
	created() {
		// 初始化复制props中数据
		this.skuList = this.list;
		this.skuSelect = this.selectArr;
	},
	methods: {
		handleNumber(e) {
			this.productInfo.count = e.value;
		},
		// sku元素选择
		skuClick(item, listIndex, index) {
			const that = this;
			const originActive = item.isActive;

			// 判断元素是否有库存可以选择
			if (item.count > 0) {
				// 获取sku数据的第一级
				const itemAttr = that.skuList[listIndex].muster;
				itemAttr.filter((v, i) => {
					v.isActive = false;
					if (index === i) {
						that.skuSelect.filter((v2, i) => {
							// 判断是否已经选中过，去重
							if (v.parentId === v2.parentId) {
								that.skuSelect.splice(i, 1);
								that.selectCount--;
							}
						});
						if (originActive) {
							v.isActive = false;
						} else {
							v.isActive = true;
							that.$set(that.skuSelect, that.selectCount++, v);
						}
					}
				});

				// that.$emit('skuSelect', that.skuSelect);
			} else {
				uni.showToast({
					title: '暂无库存',
					duration: 800,
					icon: 'none',
				});
				return false;
			}

			console.log(that.skuSelect, 123);
		},

		// 添加购物车
		handleAddCart(e) {
			let shopExist = false;
			let shopIndex = -1;
			let productExist = false;
			let productIndex = -1;
			this.goodsList.filter((item, index) => {
				// 判断该商铺是否存在
				if (item.id === this.productInfo.shopid) {
					shopExist = true;
					shopIndex = index;
					// 判断该商品是否存在
					item.product.filter((pItem, pIndex) => {
						if (pItem.id === this.productInfo.id) {
							productExist = true;
							productIndex = pIndex;
						}
					});
				}
			});
			if (shopExist === true) {
				if (productExist === true) {
					// uni.showToast({
					// 	title: '该商品已加入购物车',
					// 	duration: 1000,
					// 	icon: 'none',
					// });
				} else {
					const productData = {
						title: this.productInfo.title,
						price: this.productInfo.price,
						thumb: this.productInfo.thumb,
						count: this.productInfo.count,
						tips: this.productInfo.tips,
						id: this.productInfo.id,
						checked: true,
					};
					this.$store.commit('addGoods', {
						shopExist: true,
						shopIndex: shopIndex,
						productIndex: productIndex,
						value: productData,
					});
				}
			} else {
				const shopData = {
					shop: this.productInfo.shop,
					id: this.productInfo.shopid,
					checked: true,
					product: [
						{
							title: this.productInfo.title,
							price: this.productInfo.price,
							thumb: this.productInfo.thumb,
							count: this.productInfo.count,
							tips: this.productInfo.tips,
							id: this.productInfo.id,
							checked: true,
						},
					],
				};
				this.$store.commit('addGoods', {
					shopExist: false,
					shopIndex: shopIndex,
					productIndex: productIndex,
					value: shopData,
				});
			}

			this.$emit('addCart', e);
		},
		handleBooking() {
			const detailsBooking = {
				shop: this.productInfo.shop,
				id: this.productInfo.shopid,
				totalNum: this.productInfo.price * this.productInfo.count,
				product: [
					{
						title: this.productInfo.title,
						price: this.productInfo.price,
						thumb: '',
						count: this.productInfo.count,
						tips: this.productInfo.tips,
						id: this.productInfo.id,
						selectSku: this.selectArr,
					},
				],
			};
			uni.setStorageSync('detailsBooking', JSON.stringify(detailsBooking));
			uni.navigateTo({
				url: '../../order/booking/index?id=' + this.productInfo.id,
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.module-sku {
	background: #fff;
	min-width: 600rpx;
}
.product-content {
	padding: $uni-spacing-lg;
	@include borderCreator(bottom, solid, $uni-border-color-grey);
	text-align: center;
	.media-object {
		background: #eee;
		width: 180rpx;
		height: 180rpx;
		margin: 0 auto 10rpx;
	}
	.media-content {
		padding-left: $uni-spacing-sm;
	}

	.media-title {
		font-size: $uni-font-size-base;
		margin: 0 0 4rpx;
	}

	.media-tips {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
	}

	.media-count {
		float: right;
		color: $uni-color-main;
	}

	.media-price {
		padding: $uni-spacing-sm 0 0;
		color: $uni-text-price;
		font-size: $uni-font-size-base;
	}
}
.sku-select {
	padding: $uni-spacing-base $uni-spacing-base $uni-spacing-sm;
	.item {
		margin: 0 0 8rpx;
	}
	.item-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.item-title {
		margin: 0 0 16rpx;
		font-size: 25rpx;
		text-align: center;
	}
	.item-content {
		border: 1px solid #ccc;
		padding: 4rpx 24rpx;
		margin: 0 12rpx 24rpx;
		border-radius: 3px;
		font-size: 25rpx;
		color: #999;
		min-width: 60rpx;
		text-align: center;
		&.active {
			background: $ds-main-color;
			border: 1px solid $ds-main-color;
			color: #fff;
		}

		&.disabled {
			border: 1px solid #eee;
			background: #eee;
			color: #999;
		}
	}
}

.module-button {
	display: flex;
	padding: 0 52rpx $uni-spacing-lg;
	.button {
		font-size: 26rpx;
		margin: 0 20rpx;
		width: 50%;
		padding: 5rpx 0;
		border-radius: 20px;
	}

	.button-booking {
		background: #ffa847;
	}
}

.sku-number {
	display: flex;
	width: 100%;
	padding: 0 0 38rpx;
	justify-content: center;
}

.uni-numbox__value {
	width: 200rpx !important;
}
</style>
